<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    // 属性的简洁表示法
    // ES6允许直接写入变量和函数 作为对象的属性和方法 这样的书写更加简洁
    const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}

    // 等同于
    const baz = {foo: foo};


    // 再举一个例子
    function f(x, y) {
        return {x, y};
    }

    // 等同于

    function f(x, y) {
        return {x: x, y: y};
    }

    f(1, 2) // Object {x: 1, y: 2}

    // 除了属性简写 方法也可以简写
    const o = {
        method() {
            return "Hello!";
        }
    };

    // 等同于

    const o = {
        method: function() {
            return "Hello!";
        }
    };

    // 举个例子
    let birth = '2000/01/01';

    const Person = {
        name: '张三',
        //等同于birth: birth
        birth,
        // 等同于hello: function ()...
        hello() { console.log('我的名字是', this.name); }
    };

    // 再举个例子
    function getPoint() {
        const x = 1;
        const y = 10;
        return {x, y};
    }

    getPoint()
    // {x:1, y:10}

    // 属性名表达式
    // JavaScript定义对象的属性 有两种方法
    // 方法一 用标识符做属性名
    obj.foo = true; 

    // 方法二 用表达式做属性名
    obj['a' + 'bc'] = 123;

    // 如果用字面量方式定义对象 ES5只有一种方式
    var obj = {
        foo: true,
        abc: 123
    };

    // ES6允许字面量定义对象时 使用方法二(表达式)作为对象的属性名 把表达式放在方括号内
    let propKey = 'foo';

    let obj = {
        [propKey]: true,
        ['a' + 'bc']: 123
    };

    // 另一个例子
    let lastWord = 'last word';

    const a = {
        'first word': 'hello',
        [lastWord]: 'world'
    };

    a['first word'] // "hello"
    a[lastWord] // "world"
    a['last word'] // "world"

    // 表达式可以用于定义方法名
    let obj = {
        ['h' + 'ello']() {
            return 'hi';
        }
    };

    obj.hello() // hi

    
</script>